<template>
  <div class="user-page">
    <div class="micro-title">
      <div>组织管理 <span class="subtitle">(企业组织用户)</span></div>
    </div>
    <div class="enterprise">
      <div class="enterprise-item">
        企业名称：{{ form.name }}
        <a-icon
          v-show="form.name"
          @click="handleEnterpriseEdit"
          class="enterprise-edit"
          type="form"
        />
      </div>
      <div>企业码：{{ form.code }}</div>
    </div>
    <a-tabs v-model.trim="activeKey" @change="onChangeTab">
      <a-tab-pane :tab="item.label" v-for="item in userList" :key="item.key">
        <component :is="item.type" :ref="item.type"></component>
      </a-tab-pane>
    </a-tabs>
    <department-form ref="departmentForm" @success="getDepartmentList"></department-form>
  </div>
</template>

<script>
import { userList } from "../data";
import { UserManageList, OrgManageList } from "./components";
import departmentForm from "./components/departmentForm.vue";
import { getEnterpriseDetail } from "@/services/user.js";
import { mapGetters, mapMutations } from "vuex";

export default {
  name: "user",
  components: {
    UserManageList,
    OrgManageList,
    departmentForm
  },
  data() {
    return {
      userList,
      isLoading: false,
      form: {
        name: "",
        code: ""
      }
    };
  },
  watch: {},
  mounted() {
    this.getDepartmentList();
  },
  computed: {
    ...mapGetters("account", ["enterpriseId", "userTab"]),
    activeKey: {
      get() {
        return this.userTab || "1" ;
      },
      set() {}
    }
  },
  methods: {
    ...mapMutations("account", ["setUserTab"]),
    onChangeTab(val) {
      this.setUserTab(val);
    },
    handleEnterpriseEdit() {
      this.$refs.departmentForm.show(this.form);
    },
    async getDepartmentList() {
      if (!this.enterpriseId) return;
      this.isLoading = true;
      try {
        let {
          data: { data, code }
        } = await getEnterpriseDetail({enterpriseId: this.enterpriseId});
        if (code === 200) {
          this.isLoading = false;
          this.form = data || {};
        }
      } catch (error) {
        this.isLoading = false;
      }
    },
    onAddUser() {
      let [userDom] = this.$refs.UserManageList;
      userDom.openModal();
    }
  }
};
</script>

<style lang="less" scoped>
.user-page {
  background-color: #fff;
  padding-left: 12px;
  .micro-title {
    font-weight: 600;
    padding: 24px 0;
    color: #26272a;
    font-size: 18px;

    .subtitle {
      font-size: 16px;
    }
  }
  .enterprise {
    display: flex;
    font-size: 16px;
    flex-direction: column;
    color: #26272a;
    margin-bottom: 20px;

    &-item {
      margin-bottom: 10px;
    }

    &-edit {
      margin-left: 10px;
      color: #3d6cf7;
    }
  }

  .ant-tabs-line {
    padding-right: 12px;
  }

  .inline-form {
    display: inline-block;
  }

  ::v-deep .ant-card-head-title {
    font-weight: 600;
    padding: 12px 0;
    font-size: 18px;
  }

  ::v-deep .ant-card-head-wrapper .ant-card-extra {
    padding: 10px 0;
  }
}
</style>
